<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人页面</title>

		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css"/>
		<link rel="stylesheet" href="/css/travel.css"/>
		<script src="/js/plugins/jrender/jrender.min.js"></script>

		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/plugins/jquery/jquery.min.js"></script>
		<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
		<script type="text/javascript" src="/js/plugins/form/jquery.form.js"></script>
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css">
		<link rel="stylesheet" href="/css/userProfiles.css">
		<!--<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>-->
		<script src="/js/common.js"></script>
		<script>
			$(function () {
                //标记有没关注
                var flag
                var obj = getParams()
                //获取当前登录的用户
                var user = JSON.parse(sessionStorage.getItem("user"));
				if(obj.id==user.id){
                    //获取粉丝与关注的数量
                    $.get("/users/"+obj.id,function (data) {
                        $('.num').renderValues(data);
                    })
                    //查询用户的具体信息
                    $.get("/followAndFans/"+obj.id,function (data) {
                        $('.myBg').renderValues(data);
                        //渲染背景图片
                        $(".bg").css('background-image', 'url("' + data.coverImgUrl + '")');
                    })
					$(".hiddenBtn").attr("style",'display: none')


				}else{
                    if (obj){
                        //获取粉丝与关注的数量
                        $.get("/users/"+obj.id,function (data) {
                            $('.num').renderValues(data);
                        })
                        //查询用户的具体信息
                        $.get("/followAndFans/"+obj.id,function (data) {
                            $('.myBg').renderValues(data);
                            //渲染背景图片
                            $(".bg").css('background-image', 'url("' + data.coverImgUrl + '")');
                        })
                        var followState = function(){
                            //判断有没有关注
                            $.get("/users?fansId="+obj.id+"&followId="+user.id,{fansId:user.id,followId:obj.id},function (data) {
                                //设置已关注
                                if(data.success){
                                    flag = true;
                                    $("#followBtn").text("取消关注")
                                }else {
                                    flag = false;
                                    $("#followBtn").html("关注")
                                }
                            })
                        }
                        followState();
                    }
                    //关注、取消
                    $("#followBtn").click(function () {
                        //取消关注
                        if(flag){
                            $.ajax({
                                type:"POST",
                                url:"/followAndFans",
                                data: {fansId:obj.id,followId:user.id,_method:'DELETE'},
                                success:function (data) {
                                    $("#followBtn").html("关注")
                                    flag = false;

                                    //获取粉丝与关注的数量
                                    $.get("/users/"+obj.id,function (data) {
                                        $('.num').renderValues(data);
                                    })
                                }
                            })

                        }else {
                            //关注
                            $.post("/followAndFans",{fansId:obj.id,followId:user.id},function (data) {
                                $("#followBtn").html("取消关注")
                                flag = true;
                                //获取粉丝与关注的数量
                                $.get("/users/"+obj.id,function (data) {
                                    $('.num').renderValues(data);
                                })
                            })
                        }
                    })
				}
                //点击粉丝或关注跳转
                $(".friends").click(function () {
                    window.location.href="/mine/friends.html?id="+obj.id;
                })
                $(".fans").click(function () {
                    window.location.href="/mine/friends.html?state=true&id="+obj.id;
                })

				//调到编辑私信页面
				$("#letterBtn").click(function () {
                    window.location.href="/mine/chatInfo.html?friendId="+obj.id;
                })

				/*//回显游记列表
				$.get("/travels",{},function (data) {
                    console.log(data);
                })*/
				//--------------------------------------------------------------
                //获取装载数据的input框
                var currentInput = $("#currentPage");
                //创建用于存储游记的数组
                var travelArr = [];
                //总页数
                var pages = 1;
                //当前页为第一页
                // currentInput.val(1);

                //获取游记数据的方法
                function query() {
                    //获取当前页的值
                    var currentPage = currentInput.val();
                    $.get('/travels', {currentPage: currentPage,authorId:obj.id}, function (data) {
                        //合并两个数组到第一个参数数组上
                        $.merge(travelArr, data.list);
                        //用于渲染时循环,循环时是取list的属性出来
                        var json = {
                            list: travelArr
                        };
                        //渲染数据
                        $("#allTravels").renderValues(json, {
                            getHref: function (item, value) {
                                //item是当前要渲染数据的元素(a),value就是render-key获取的值
                                //获取要跳转的地址
                                var href = $(item).data("href");
                                //把id拼接进去,再设置到a连接的href属性上
                                $(item).attr('href', href + value);
                            },getHref1:getHref,
                        });
                        //设置总页数
                        pages = data.pages;
                    });
                    //当前页input框+1
                    currentInput.val(parseInt(currentPage) + 1);
                }

                //默认查询第一页的数据
                query();

                //当页面滚动条变化时，执行的函数
                $(window).scroll(function () {
                    if ($(document).scrollTop() + $(window).height() >= $(document).height() - 1) {
                        var currentPage = currentInput.val();
                        //判断是否小于或等于最后一页,如果是就去查询
                        if (currentPage <= pages) {
                            query();
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '已经到底了!',
                                autoClose: 500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                });
                function travelpaging() {
                    $(window).scroll(function () {
                        if ($(document).scrollTop() + $(window).height() >= $(document).height()-1) {
                            var currentPage2 = currentInput2.val();
                            if (judge == 2) {
                                if (currentPage2 <= pages2) {
                                    travel();
                                } else {
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '已经到底了!',
                                        autoClose: 500,
                                        position: 'bottom'  // center: 居中; bottom: 底部
                                    });
                                    //$("#deletetext").val("");
                                }
                            }
                        }
                    })
                }
            })
		</script>
	</head>
	<body>
		<div class="myBg bg">
			<a href="javascript:window.history.go(-1)" class="my-arrow">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
				<div class="info">
					<img class="rounded-circle" width="17%" render-src="headImgUrl">
					<p class="name" render-html="nickName"></p>
					<p render-html="sign"></p>

					<div class="row num">
						<div class="col-2 border border-left-0 border-top-0 border-bottom-0 friends" >
							<div>
								<span render-html="follows"></span>
							</div>
							<div>
								<span>关注</span>
							</div>
						</div>
						<div class="col-2 fans">
							<div>
								<span render-html="fans"></span>
									</div>
							<div>
								<span>粉丝</span>
							</div>
						</div>
						<div class="col hiddenBtn">
							<button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
							<button class="btn btn-success ibtn" id="followBtn"></button>
						</div>
					</div>
				</div>
		</div>
		</div>

		<div class="tabs">
			<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
						TA的游记[<span>1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
						TA的点评[<span>1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
						TA的旅行单[<span>0</span>]
					</a>
				</li>
			</ul>
			<div class="container tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="travels">


					<div class="container" id="allTravels2">
						<h6>全部游记</h6>
						<div id="allTravels">
							<div render-loop="list">
								<div class="row detail">
									<div class="col">
										<a data-href="travelContent.html?id=" render-key="list.id" render-fun="getHref">
											<h4 render-html="list.title"></h4>
										</a>
										<p>
											<a data-href="/mine/userProfiles.html?id=" render-key="list.author.id" render-fun="getHref1">
												<img class="rounded-circle head-img" render-src="list.author.headImgUrl">
												<span render-html="list.author.nickName"></span> </a> 在
											<span class="addr" render-html="list.place.name"></span>

										</p>
										<p>
											<i class="fa fa-eye fa-fw"></i>
											<span>0</span>
											<i class="fa fa-commenting fa-fw"></i>
											<span>0</span>
										</p>
									</div>
									<div class="col bigimg">
										<a data-href="/travelContent.html?id=" render-key="list.id" render-fun="getHref">
											<img render-src="list.coverUrl">
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>

				<div class="comment tab-pane fade " id="comments">
					<input type="hidden" name="currentPage" value="1">
					<input type="hidden" name="pageSize" value="5">
					<input type="hidden" name="rows" value="1">
					<div>
						<div class="row">
							<div class="col-2 comment-head">
								<img class="rounded-circle" src="/upload/7e854d1d-a7be-4360-8943-8771d18ee0e3.jpg">
							</div>
							<div class="col">
								<span class="comment-star"><i class="fa fa-star"></i><i class="fa fa-star"></i><i
										class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></span>

								<span class="comment-date">2018-07-11</span>
								<div class="comment-content">
									<a href="strategyComment.html" data-id="4">
										<p>骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕...</p>
									</a>
								</div>
								<ul class="comment-img">
									<li>
										<img src="/upload/63bb765d-5dff-44f8-b7f1-cb338b9b9f95.jpeg">
									</li>
									<li>
										<img src="/upload/7d437f8d-a476-465c-bd84-e93a03d8efd5.jpeg">
									</li>
								</ul>

								<div class="comment-link">
									<a href="strategyCatalogs.html" data-id="2">
										<img src="/upload/e5e8a1a7-b127-4145-9fd0-a94e29f752ba.jpeg"> <span>广州攻略</span>
										<i class="fa fa-angle-right fa-2x"></i>
									</a>
								</div>

							</div>
						</div>
					</div>

				</div>
				<div class="tab-pane fade" id="pills-contact">.3333..</div>
			</div>
		</div>

	

</body>
</html>